<!-- APP历史版本 -->
<template>
  <div class="content">
    <!-- 筛选栏 -->
    <search-form ref="searchForm" :dataFilterShow="false">
      <div>
        <!-- 版本名 -->
        <el-form-item
          label="版本名:"
          label-width="80px"
          prop="roleName"
          style="width:300px"
        >
          <el-select
            v-model="filterData.version"
            placeholder="请选择"
            clearable
            @focus="getVersionName"
          >
            <el-option
              v-for="(item, index) in versionOptions"
              :key="index"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 渠道 -->
        <el-form-item label="渠道:" label-width="60px" prop="roleName">
          <el-select
            v-model="filterData.phoneType"
            placeholder="请选择"
            style="width: 100px"
            @change="phoneTypeChange"
            clearable
          >
            <el-option label="Android" :value="1"></el-option>
            <el-option label="IOS" :value="2"></el-option>
          </el-select>
          <el-select
            v-model="filterData.channel"
            placeholder="请选择"
            style="width: 160px"
            clearable
          >
            <el-option
              v-for="(item, index) in filterData.phoneType === 1
                ? androidOptions
                : filterData.phoneType === 2
                ? iosOptions
                : []"
              :key="index"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 强制更新 -->
        <el-form-item
          label="强制更新:"
          label-width="80px"
          prop="roleName"
          style="width:200px"
        >
          <el-select v-model="filterData.type" placeholder="请选择" clearable>
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div slot="tool">
        <el-button type="primary" @click="upDateVersion(1, {})">添加</el-button>
        <el-button @click="getDataList">查询</el-button>
      </div>
    </search-form>

    <!-- 列表栏 -->
    <filter-table
      :tableData="dataList.records"
      :pageData="dataList"
      @pageChange="pageChange"
      :loading="loading"
      ref="refFilterTable"
    >
      <template slot="table">
        <el-table-column prop="version" label="版本名"></el-table-column>
        <el-table-column label="是否强制更新">
          <template slot-scope="scope">
            <span>{{ scope.row.type === 1 ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="渠道" width="165">
          <template slot-scope="scope">
            <span>{{ formdataChannel(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="updateTime" label="上传时间"></el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="{ row }">
            <el-button type="text" @click="upDateVersion(2, row)"
              >修改</el-button
            >
            <el-button type="text" @click="upDateRemark(row)">备注</el-button>
          </template>
        </el-table-column>
      </template>
    </filter-table>
    <!-- 新增编辑版本 -->
    <update-version
      ref="updateDeptDialog"
      :isAdd="isAdd"
      :detailData="roleData"
      :androidOptions="androidOptions"
      :iosOptions="iosOptions"
      :addEditVisible="addEditVisible"
    >
    </update-version>
    <!-- 备注 -->
    <update-remark
      ref="remarkDialog"
      :detailData="remarkData"
      :remarkVisible="remarkVisible"
    >
    </update-remark>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SearchForm from '@/components/searchForm/searchTable'
import FilterTable from '@/components/filterTable/index'
import UpdateVersion from './components/updateVersion'
import UpdateRemark from './components/updateRemark'
import {
  historyVersionList,
  getVersionName,
  getdictlist
} from '@/api/rightsManage'
export default {
  name: 'appHistoryVersion',
  components: { SearchForm, FilterTable, UpdateVersion, UpdateRemark },
  computed: {
    ...mapGetters(['name', 'userInfo'])
  },
  data() {
    return {
      loading: false,
      versionOptions: [],
      androidOptions: [],
      iosOptions: [],
      addEditVisible: false,
      remarkVisible: false,
      filterData: {
        channel: '',
        phoneType: '',
        type: '',
        version: ''
      },
      isAdd: 1,
      roleData: {},
      remarkData: {},
      dataList: [],
      pagination: {
        page: 1,
        // total: null,
        limit: 20
      }
    }
  },
  created() {},
  mounted() {
    this.getDataList()
    this.getDict()
  },
  methods: {
    // 获取列表数据
    getDataList() {
      this.loading = true
      historyVersionList(
        Object.assign({}, this.filterData, this.pagination)
      ).then(res => {
        this.loading = false
        this.dataList = res.data
      })
    },
    getDict() {
      getdictlist({
        type: 'android_channel_options'
      }).then(res => {
        this.androidOptions = JSON.parse(res.data[0].value)
      })
      getdictlist({
        type: 'ios_channel_options'
      }).then(res => {
        this.iosOptions = JSON.parse(res.data[0].value)
      })
    },
    getVersionName() {
      getVersionName().then(res => {
        this.versionOptions = res.data.map(item => {
          return {
            name: item,
            value: item
          }
        })
      })
    },
    // 新增编辑角色
    upDateVersion(type, item) {
      this.isAdd = type
      this.roleData = Object.assign({}, item)
      this.$refs.updateDeptDialog.addEditVisible = true
    },
    upDateRemark(item) {
      this.remarkData = Object.assign({}, item)
      this.$refs.remarkDialog.remarkVisible = true
    },
    // 删除角色
    delRole(roleId) {
      this.$confirm('确认删除角色?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          removeRole({ roleId: roleId }).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getDataList()
          })
        })
        .catch(() => {})
    },
    // 分页联动
    pageChange(pagedata) {
      setTimeout(() => {
        this.pagination = pagedata
      }, 1)
    },
    phoneTypeChange() {
      this.filterData.channel = ''
    },
    formdataChannel(row) {
      let options = row.phoneType === 1 ? this.androidOptions : this.iosOptions
      let channel = options.filter(item => {
        return item.value === row.channel
      })
      let phoneType = row.phoneType === 1 ? 'Android' : 'IOS'
      return `${phoneType}-${channel.length > 0 ? channel[0].name : ''}`
    }
  },
  watch: {
    filterData: {
      deep: true,
      handler(now, old) {
        this.pagination.page === 1
          ? this.getDataList()
          : (this.pagination.page = 1)
      }
    },
    pagination: {
      deep: true,
      handler(now, old) {
        this.getDataList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.filterForm {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
<style lang="scss">
.el-tooltip__popper {
  max-width: 80%;
}
</style>
